// http://geek.itheima.net/v1_0/user/channels

import { useEffect, useState } from 'react'

// 获取数据并渲染
export default function App() {
  const [list, setList] = useState([])
  useEffect(() => {
    // 是浏览器内置的 API，用来替代 XMLHttpRequest，工作中目前用到最多的还剩 Axios
    const getData = async () => {
      // fetch 的返回的是一个 Promise
      const res = await fetch('http://geek.itheima.net/v1_0/user/channels')
      // 如果说后端返回是 JSON 格式的字符串，那么这里就可以直接用 res.json() 进行转换得到结果
      // 如果说后端返回是普通的字符串，那么这里就可以直接用 res.text() 进行转换得到结果
      const {
        data: { channels },
      } = await res.json()
      // !把 channels 设置到状态中
      setList(channels)
    }
    getData()
  }, [])

  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}
